<!--使用该组件必须保证外层组件含有el-form-->
<template>
  <el-form-item class="FormWithLabel mr10"
                :class="bespokeType === 'formSub' ? 'mb20' : 'mb5'"
                :label="label"
                v-bind="$attrs"
                :label-width="calcLabelWidth">
    <div class="form-box"
         :style="{width: calcSlotWidth}"
         :class="{fixHeight32: slotHightLock}">
      <slot></slot>
    </div>
    <slot name="after"></slot>
  </el-form-item>
</template>

<script type="text/ecmascript-6">
export default {
  props: {
    // el-form-item的props之一，其余props通过$attrs传入。
    bespokeType: {
      type: String,
      default: 'formSub',
      validator: data => ['formSub', 'formSearch'].includes(data)
    },
    label: {
      type: String,
      required: true
    },
    labelWidth: {
      type: [String, Number],
      default: ''
    },
    slotWidth: {
      type: [String, Number],
      default: '200px'
    },
    slotHightLock: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    calcSlotWidth () {
      if (typeof this.slotWidth === 'string') {
        return this.slotWidth
      } else {
        return this.slotWidth + 'px'
      }
    },
    calcLabelWidth () {
      // label自定义宽度
      if (this.labelWidth) {
        if (typeof this.labelWidth === 'string') {
          return this.labelWidth
        } else {
          return this.labelWidth + 'px'
        }
      }
      // label自动宽度
      let length = this.label.replace(/[\u0391-\uFFE5]/g, '**').length // 按照全角半角计算长度
      if (length === 0) { // 无内容
        return '0px'
      } else if (length <= 8) { // 1-4字
        return '90px'
      } else if (length <= 12) { // 5-6字
        return '100px'
      } else if (length <= 16) { // 7-8字
        return '130px'
      } else {
        return '160px'
      }
    }
  }
}
</script>

<style scoped rel="stylesheet/scss" type="text/scss" lang="scss">
@import "~@/assets/css/public.scss";

.FormWithLabel {
}

/*line-height: 32px 对应的是size: small*/
/deep/ .el-form-item__label {
  display: inline-block;
  height: 32px;
  padding: 0;
  border: 1px solid #eee;
  background-color: #fcfcfc;
  line-height: 32px;
  text-align: center;
  color: #{$c-333};
}

/deep/ .el-form-item__content {
  line-height: 32px;
}

.form-box {
  display: inline-flex;
  justify-content: center;
  line-height: 32px; // 苹果电脑需要、非苹果目前似乎不需要
  &.fixHeight32 {
    height: 32px !important;
  }
  /deep/ .el-input {
    line-height: 32px;
  }
  /deep/ .el-input__inner {
    // 输入框、选择框
    height: 32px !important;
    border: 1px solid #eee;
    border-radius: 5px;
    &.is-focus {
      border-color: #{$c-main};
    }
  }
  /deep/ .el-select {
    // 选择框
    width: 100%;
  }
  /deep/ .el-autocomplete {
    width: 100%;
  }
  /deep/ .el-input__icon {
    line-height: 24px;
  }
  /deep/ .el-checkbox-group {
  }
  /deep/ .el-date-editor--daterange {
    // 范围时间选择器
    width: 100%;
    .el-input__icon.el-range__icon.el-icon-date {
      line-height: 24px;
    }
    .el-range-separator {
      line-height: 24px;
    }
  }
}
</style>
